<template>
  <div class="winngers-comp-content">
    <popup ref="popup" style="z-index: 991" :isMaskClick="true">
      <!-- 中奖名单 -->
      <view class="border-card description-box" style="width: 85%">
        <view class="flex justify-between items-center">
          <view class="title-box">
            <image class="title-icon" src="./image/ming-dan.png" mode="widthFix"></image>
            <p class="title">中奖名单</p>
          </view>
        </view>

        <view class="list-box">
          <t-table @change="change">
            <t-tr>
              <t-th style="flex: 0.5">用户</t-th>
              <t-th>奖品</t-th>
            </t-tr>
            <scroll-view
              scroll-y="true"
              style="max-height: 800rpx; width: 100%"
              @scrolltolower="scrolltolower"
            >
              <t-tr v-for="(item, index) in list" :key="index">
                <t-td style="flex: 0.5">
                  {{ item.mobile }}
                </t-td>
                <t-td>
                  {{ item.prizeName }}
                </t-td>
              </t-tr>
            </scroll-view>
          </t-table>
          <view
            v-if="list.length === 0"
            class="item-prop"
            style="
              justify-content: center;
              border: 1px solid rgb(208, 222, 229);
              border-top: 0;
              padding: 20rpx 10rpx;
              margin: 0;
            "
          >
            暂无
          </view>
        </view>
      </view>
      <!-- / 中奖名单 -->
    </popup>
  </div>
</template>

<script>
  import * as Api from '@/server/index.js';
  import * as Utils from '@/utils/index.js';
  import popup from '@/components/popup/index.vue';
  import tTable from '@/components/t-table/t-table.vue';
  import tTh from '@/components/t-table/t-th.vue';
  import tTr from '@/components/t-table/t-tr.vue';
  import tTd from '@/components/t-table/t-td.vue';

  export default {
    name: 'winngersComp',

    components: {
      popup,
      tTable,
      tTh,
      tTr,
      tTd,
    },

    props: {
      jobId: {
        type: String | Number,
        default: '',
        require: true,
      },
    },

    data() {
      return {
        list: [],
        current: 1,
        size: 10,
        total: 0,
      };
    },

    mounted() {},

    methods: {
      async openComp() {
        this.current = 1;
        await this.getWinngers();
        this.open();
      },

      /**
       * 滚动到底部/右边
       * @param {*} e
       */
      scrolltolower(e) {
        if (this.list.length < this.total) this.getWinngers();
      },

      /**
       * 中奖名单
       */
      async getWinngers() {
        Utils.Msg.ShowLoading();
        const param = {
          current: this.current,
          size: this.size,
        };
        try {
          const { data: res } = await Api.index.pagePrize(param);
          Utils.Msg.HideLoading();
          console.log('中奖名单 :>> ', res.data);
          this.total = res.data.total;
          this.list = this.current === 1 ? res.data.items : this.list.concat(res.data.items);
          if (this.list.length > res.data.total) return;
          this.current++;
        } catch (error) {
          Utils.Msg.HideLoading();
        }
      },

      open() {
        this.$refs.popup.open();
      },

      close() {
        this.$refs.popup.close();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .winngers-comp-content {
    z-index: 991;
  }

  .t-tr {
    .t-td {
      font-size: 24rpx;
    }
  }

  /**************************/
  .border-card {
    background-color: #fff;
    margin: 0 30rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
  }
  .description-box {
    margin-top: 30rpx;
    padding: 40rpx 30rpx;
    border-radius: 20rpx;
  }
  .title-box {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .title-icon {
    width: 42rpx;
    height: 42rpx;
  }

  .title {
    margin-left: 10rpx;
    font-size: 36rpx;
    font-weight: 700;
  }

  .list-box {
    margin-top: 20rpx;
  }

  .item-prop {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    padding: 0 10rpx;
    margin: 20rpx 0;
    .name {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .time {
      margin-left: 10rpx;
    }
  }
</style>
